<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    table {
      border-collapse: collapse;
    }
    td,
    th {
      padding: 10px 16px;
      border: 1px solid #aaa;
    }
  </style>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>
    <script src="./data.js"></script>
    <script src="./format.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        // 组件数据
        constructor() {
          super();
          this.state = {
            message: "hello world",
            books: books,
          };

          // 对需要绑定的方法，提前绑定好this
        }
        // 组件方法 (实例方法)
        //计算总价格方式二
        getTotalPrice() {
          const totalPrice = this.state.books.reduce(
            (previousValue, currentValue, currentIndex, array) => {
              return previousValue + currentValue.count * currentValue.price;
            },
            0
          );
          return totalPrice;
        }

        changeCount(index, count) {
          const newBooks = [...this.state.books];
          newBooks[index].count += count;
          this.setState({
            books: newBooks,
          });
        }
        removeItem(index) {
          const newBooks = [...this.state.books];
          newBooks.splice(index, 1);
          this.setState({
            books: newBooks,
          });
        }
        renderBookList(){
            const {books} = this.state
            return <div>
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {books.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{index + 1}</td>
                        <td>{item.name}</td>
                        <td>{item.date}</td>
                        <td>{formatPrice(item.price)}</td>
                        <td>
                          <button
                            disabled={item.count <= 1}
                            onClick={() => this.changeCount(index, -1)}
                          >
                            -
                          </button>
                          {item.count}
                          <button onClick={() => this.changeCount(index, 1)}>
                            +
                          </button>
                        </td>
                        <td>
                          <button onClick={() => this.removeItem(index)}>
                            删除
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
              <h2>总价格: {formatPrice(this.getTotalPrice())}</h2>
            </div>
        }
        renderBookEmpty(){
            return <div><h2>购物车为空,请添加书籍~</h2></div>
        }
        // 渲染内容  render方法
        render() {
          const { books } = this.state;

          //   计算总价格方式一:
          //   let totalPrice = 0
          //   for(let i = 0; i<books.length;i++){
          //     const book= books[i]
          //     totalPrice += book.price * book.count
          //   }
         
          return books.length ? this.renderBookList() : this.renderBookEmpty()
        }
      }

      // 将组件渲染到界面上
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>
